import React from 'react'
import {Card, Button, Tabs, message, Icon} from 'antd'
import './ui.less'

export default class Tab extends React.Component {
    callback = (key) => {
        message.info(`click ${key}`)
    }
    componentWillMount(){
        const panes =[
            {
                title:'tab1',
                content:'tab1~~',
                key:'1',
            },
            {
                title:'tab2',
                content:'tab2~~',
                key:'2',
            },
            {
                title:'tab3',
                content:'tab3~~',
                key:'3',
            }
        ]
        this.setState({
            panes,
            activeKey:panes[0].key
        })
    }
    onChange = (activeKey) => {
        this.setState({ activeKey });
    }
    onEdit = (targetKey, action) => {
        this[action](targetKey);
    }

    newTabIndex = 0
    add = () => {
        const panes = this.state.panes;
        const activeKey = `newTab${this.newTabIndex++}`;
        panes.push({ title: activeKey, content: 'Content of new Tab'+activeKey, key: activeKey });
        this.setState({ panes, activeKey });
    }

    remove = (targetKey) => {
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (panes.length && activeKey === targetKey) {
            if (lastIndex >= 0) {
                activeKey = panes[lastIndex].key;
            } else {
                activeKey = panes[0].key;
            }
        }
        this.setState({ panes, activeKey });
    }
    render() {
        const icon = <Icon type={'loading'}/>
        return <div>
            <Card title={"tab标签"} className={"card-wrap"}>
               <Tabs defaultActiveKey={"3"} onChange={(e)=>this.callback(e)}>
                   <Tabs.TabPane tab={"tab1"} key={1}>111</Tabs.TabPane>
                   <Tabs.TabPane tab={"tab2"} key={2} disabled >222</Tabs.TabPane>
                   <Tabs.TabPane tab={"tab3"} key={3}>333</Tabs.TabPane>
               </Tabs>
            </Card>
            <Card title={"tab带图的标签"} className={"card-wrap"}>
                <Tabs defaultActiveKey={"2"} onChange={(e)=>this.callback(e)}>
                    <Tabs.TabPane tab={ <span><Icon type={'plus'}/> 图片加文字</span>} key={1}>111</Tabs.TabPane>
                    <Tabs.TabPane tab={ <span><Icon type={'solution'}/> solution</span>} key={2}>solution</Tabs.TabPane>
                    <Tabs.TabPane tab={"tab2"} key={3}>222</Tabs.TabPane>
                    <Tabs.TabPane tab={"tab3"} key={4}>333</Tabs.TabPane>
                </Tabs>
            </Card>
            <Card title={"tab动态的标签"} className={"card-wrap"}>
                <Tabs defaultActiveKey={"2"} onChange={(e)=>this.callback(e)}>
                    {
                        this.state.panes.map((panel) => {
                            return <Tabs.TabPane tab={panel.title} key={panel.key}>{panel.content}</Tabs.TabPane>
                        })
                    }
                </Tabs>
            </Card>
            <Card title={"tab可编辑的标签"} className={"card-wrap"}>
                <Tabs
                    onChange={this.onChange}
                    activeKey={this.state.activeKey}
                    type="editable-card"
                    onEdit={this.onEdit}
                    defaultActiveKey={this.state.activeKey}
                >
                    {
                        this.state.panes.map((panel) => {
                            return <Tabs.TabPane tab={panel.title} key={panel.key}>{panel.content}</Tabs.TabPane>
                        })
                    }
                </Tabs>
            </Card>
        </div>
    }
}
